<!-- 系统Setup板块 -- 协议文本Setup页面 -->
<template>
  <div>
    <el-tabs type="border-card" style="width:60%" @tab-click="handleClick">
      <el-tab-pane label="Deposit Agreement">
        <r-tinymce v-model="value1"></r-tinymce>
        <!-- <Tinymce :value="value1" v-model="value1" v-if="activeName=='Deposit协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(1)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="User Agreement">
        <r-tinymce v-model="value2"></r-tinymce>
        <!-- <Tinymce :value="value2" v-if="activeName=='User协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(2)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Recharge Agreement">
        <r-tinymce v-model="value3"></r-tinymce>
        <!-- <Tinymce :value="value3" v-if="activeName=='Recharge协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(3)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Privacy Agreement">
        <r-tinymce v-model="value4"></r-tinymce>
        <!-- <Tinymce :value="value4" v-if="activeName=='隐私协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(4)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="User Guide">
        <r-tinymce v-model="value5"></r-tinymce>
        <!-- <Tinymce :value="value5" v-model="value5" v-if="activeName=='User指南'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(5)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="About Us">
        <r-tinymce v-model="value6"></r-tinymce>
        <!-- <Tinymce :value="value6" v-model="value6" v-if="activeName=='关于我们'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(6)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Package Agreement">
        <r-tinymce v-model="value7"></r-tinymce>
        <!-- <Tinymce :value="value6" v-model="value6" v-if="activeName=='套餐协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(7)" type="primary">Save</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import Tinymce from "@/components/Tinymce/index.vue";
export default {
  name: "platform_information",
  components: {
    // Tinymce
  },
  data() {
    return {
      value1: "Please Input Deposit Agreement...",
      value2: "Please Input User Agreement...",
      value3: "Please Input Recharge Agreement...",
      value4: "Please Input Privacy Agreement...",
      value5: "Please Input User Guide...",
      value6: "Please Input About Us...",
      value7: "Please Input Package Agreement...",
      activeName: "Deposit Agreement",
      activeShow: false
    };
  },
  mounted() {
    this.getData();
    this.$nextTick(() => (this.activeShow = true));
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.label;
      this.activeShow = false;
      this.$nextTick(() => (this.activeShow = true));
    },
    async getData() {
      const res1 = await this.apis.protocolGuide_getInfo({
        type: 1
      });

      this.value1 = res1.data.content;
      const res2 = await this.apis.protocolGuide_getInfo({
        type: 2
      });

      this.value2 = res2.data.content;
      const res3 = await this.apis.protocolGuide_getInfo({
        type: 3
      });

      this.value3 = res3.data.content;

      const res4 = await this.apis.protocolGuide_getInfo({
        type: 4
      });

      this.value4 = res4.data.content;

      const res5 = await this.apis.protocolGuide_getInfo({
        type: 5
      });

      this.value5 = res5.data.content;

      const res6 = await this.apis.protocolGuide_getInfo({
        type: 6
      });

      this.value6 = res6.data.content;

      const res7 = await this.apis.protocolGuide_getInfo({
        type: 7
      });

      this.value7 = res7.data.content;
    },
    async submit(type) {
      const res = await this.apis.protocolGuide_saveOrUpdate({
        type: type,
        content: this["value" + type]
      });
      this.$message({
        message: "Operations Success！",
        type: "success"
      });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-tabs__item:hover {
  color: #6bdb85 !important;
  cursor: pointer;
  border: 1px solid #6bdb85;
}

/deep/ .el-tabs__item.is-active {
  color: #6bdb85 !important;
  // border: 1px solid #6bdb85;
}
</style>
